<template>
    <n-drawer v-model:show="props.active" :width="300" placement="right" :trap-focus="false" :block-scroll="false"
        to="#data-table-main-container" :on-update:show="handleUpdateShow">
        <div p-20>
            <n-form ref="formRef" :label-width="80" :model="formValue">
                <n-form-item v-for="(item, _) in props.formItems" :label="item.label" path="item.key">
                    <n-input v-model:value="formValue[item.key]" :placeholder="item.placeholder" />
                </n-form-item>
            </n-form>
            <slot />
        </div>
    </n-drawer>
</template>
  
<script setup lang="ts">
import { FormInst } from 'naive-ui'

const emit = defineEmits<{
    (event: 'update:active', value: boolean): void
}>()

const props = defineProps({
    active: {
        type: Boolean,
        default: false,
    },
    formItems: {
        type: Array as PropType<FormData.FormItem[]>,
        default: [],
    }
})

const formRef = ref<FormInst | null>(null)
const formValue = reactive<FormData.FormValue>({})

function handleUpdateShow(show: boolean) {
    emit('update:active', show)
}

defineExpose({
    formValue
})
</script>